.pay {
    .pay_main {
        width: 900px;
        margin: auto;
        box-sizing: border-box;
        padding-top: 20px;

        .user_name {
            width: 180px;
            height: 30px;
            border: 1px solid #968db7;
            border-radius: 4px;
            box-sizing: border-box;
            padding-left: 5px;
        }

        .pay_to {
            margin-left: 10px;
            cursor: pointer;
            color: #968db7;

            &:hover {
                color: #673ab7;
            }
        }

        .pay_amount {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;

            .amount_cont1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 200px;
                height: 80px;
                border: 1px solid #e7ecf1;
                border-radius: 4px;
                cursor: pointer;

                &.active {
                    color: #673ab7;
                    border: 1px solid #673ab7;

                    .down {
                        color: #673ab7;
                    }
                }

                .up {
                    display: flex;
                    align-items: flex-end;
                    gap: 5px;

                    .up1 {
                        font-size: 24px;
                    }
                }

                .down {
                    margin-top: 12px;
                    color: #757575;
                }
            }
        }

        .recharge_channel {
            margin-top: 20px;

            .channel_main {
                margin-top: 20px;
                width: 80px;
                height: 32px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .channel {
                    width: 30px;
                    height: 30px;
                    border: 1px solid transparent;
                    border-radius: 4px;
                    cursor: pointer;

                    &.active {
                        border-color: #673ab7;
                    }

                    &.channel1 {
                        background: url("@images/zhifubao-icon.png") no-repeat
                            center center;
                        background-size: 100% 100%;
                    }
                    &.channel2 {
                        background: url("@images/wechat-icon.png") no-repeat
                            center center;
                        background-size: 100% 100%;
                    }
                }
            }
        }

        .agree {
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;

            span {
                margin-left: 5px;
            }

            a {
                text-decoration: underline;
            }
        }

        .recharge {
            position: relative;
            width: 96px;
            height: 30px;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            font-weight: 600;
            border: 1px solid #968db7;
            border-radius: 4px;
            box-shadow: inset 0 0 4px 4px rgb(150 141 183 / 20%);
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            margin-top: 20px;
        }
    }
}
